How To Add A Custom Font To Your Squarespace Site
Pin this post to Pinterest! ☝🏻
I design all of my sites in Figma before I build them on Squarespace. Figma has TONS and tons of terrific fonts that I love to use. Even though Squarespace has hundreds of (good) fonts, sometimes I find one in Figma that isn't in Squarespace.
The good news is you can easily add custom fonts to your site with a little CSS. This may go without saying, but everyone else that views your site will also be able to see the custom font.
For example, I really wanted to use the font Neue Droschke on one my templates (download the font here), but it wasn't available in Squarespace.
DOWNLOAD YOUR FONT
If you don't already have your font on your computer, you will need to download it. Here are some resources I use to download fonts -
Creative Market (they have free downloads each week that usually include some really cool fonts)
Your file will probably download into a zipped folder, so you'll need to unzip it. You can do that by just dragging it out of the folder and onto your desktop.
ADD THE FONT TO YOUR SITE
Go to Design and click Custom CSS
Paste this into the CSS editor:
//change font for h1, h2, h3, and h4//
@font-face {
font-family: 'Neue Droschke' !important;
src: url(YOUR URL HERE);
}
// Typography //
h1,
h2,
h3,
h4 {
font-family: 'Neue Droschke' !important;
}The first section of code is telling Squarespace that there's a new font in town. The second section of code is telling Squarespace where to use that font. If you don't want to use that font for all heading tags, you can remove whichever h tag you don't want. You can also changes the h's to p's if you want to use the font for paragraphs.
There are 3 parts that we'll need to adjust.
Start by replacing 'Neue Droschke' in both sections with the name of your font. Be sure to include the apostrophes on either side of the name.
Next, delete the words "YOUR URL HERE" and place the cursor between the parentheses (this is important). Then click Manage Custom Files and upload your font. Once the font is uploaded, then click the name of the font once. Now it has inserted the font where your cursor was.
FINAL PRODUCT
Here's how my template looks now with the Neue Droschke font added as a heading:
HOW TO FIND A FONT
Have you ever seen some text and wondered what font it was?? Me too! There are a couple of ways to find out what a font is. I use these tools allll the time.
If it's on a website as text, you can use the WhatFont extension for your browser:
If it's embedded in an image, you can download that image and then use one of these sites below to upload your image and it will find your font!
*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.
